WebXR Hit Test Manager: การนำระบบ Ray Casting มาใช้เพื่อประสบการณ์ที่ดื่มด่ำ

การเติบโตของเทคโนโลยี Augmented Reality (AR) และ Virtual Reality (VR) ได้เปิดโอกาสใหม่ๆ ที่น่าตื่นเต้นสำหรับการสร้างประสบการณ์ดิจิทัลที่ดื่มด่ำและโต้ตอบได้ WebXR ซึ่งเป็น JavaScript API สำหรับการเข้าถึงความสามารถของ VR และ AR ในเว็บเบราว์เซอร์ ช่วยให้นักพัฒนาทั่วโลกสามารถสร้างประสบการณ์เหล่านี้ได้บนอุปกรณ์หลากหลายประเภท องค์ประกอบสำคัญในการสร้างประสบการณ์ WebXR ที่น่าสนใจคือความสามารถในการโต้ตอบกับสภาพแวดล้อมเสมือนจริง นี่คือที่มาของ WebXR Hit Test Manager และ ray casting

Ray Casting คืออะไร และทำไมจึงสำคัญ?

Ray casting ในบริบทของ WebXR เป็นเทคนิคที่ใช้ในการกำหนดว่ารังสีเสมือน (เส้นตรง) ตัดกับพื้นผิวโลกจริงที่ตรวจจับได้โดยระบบ AR หรือวัตถุเสมือนในสภาพแวดล้อม VR หรือไม่ ลองนึกภาพเหมือนกับการส่องเลเซอร์พอยเตอร์ไปรอบๆ ตัวคุณและดูว่ามันโดนอะไร WebXR Hit Test Manager ให้เครื่องมือในการดำเนินการ ray casts เหล่านี้และดึงผลลัพธ์ ข้อมูลนี้มีความสำคัญอย่างยิ่งสำหรับการโต้ตอบที่หลากหลาย รวมถึง:

• การวางวัตถุ: อนุญาตให้ผู้ใช้จัดวางวัตถุเสมือนบนพื้นผิวโลกจริง เช่น การวางเก้าอี้เสมือนในห้องนั่งเล่นของพวกเขา (AR) ลองนึกภาพผู้ใช้ในโตเกียวกำลังตกแต่งอพาร์ตเมนต์ของตนเองในโลกเสมือนจริงก่อนที่จะตัดสินใจซื้อเฟอร์นิเจอร์
• การเล็งและการเลือก: เปิดใช้งานให้ผู้ใช้เลือกวัตถุเสมือนหรือโต้ตอบกับองค์ประกอบ UI โดยใช้ตัวชี้เสมือนหรือมือ (AR/VR) ลองจินตนาการถึงศัลยแพทย์ในลอนดอนที่ใช้ AR เพื่อซ้อนทับข้อมูลกายวิภาคศาสตร์บนผู้ป่วย โดยเลือกพื้นที่เฉพาะเพื่อตรวจสอบ
• การนำทาง: การเคลื่อนย้ายอวาตาร์ของผู้ใช้ผ่านโลกเสมือนโดยการชี้ไปยังตำแหน่งและสั่งให้พวกเขาเคลื่อนที่ไปที่นั่น (VR) พิพิธภัณฑ์ในปารีสอาจใช้ VR เพื่อให้ผู้เยี่ยมชมนำทางผ่านนิทรรศการทางประวัติศาสตร์
• การรู้จำท่าทาง: การผสมผสานการทดสอบการกระทบเข้ากับการติดตามมือเพื่อตีความท่าทางของผู้ใช้ เช่น การหยิกเพื่อซูมหรือปัดเพื่อเลื่อน (AR/VR) สิ่งนี้สามารถใช้ในการประชุมออกแบบร่วมกันในซิดนีย์ ซึ่งผู้เข้าร่วมจะจัดการแบบจำลองเสมือนร่วมกัน

ทำความเข้าใจ WebXR Hit Test Manager

WebXR Hit Test Manager เป็นส่วนสำคัญของ WebXR API ที่ช่วยในการทำ ray casting โดยมีเมธอดสำหรับการสร้างและจัดการแหล่งทดสอบการกระทบ (hit test sources) ซึ่งกำหนดจุดกำเนิดและทิศทางของรังสี จากนั้นตัวจัดการจะใช้แหล่งข้อมูลเหล่านี้เพื่อทำการทดสอบการกระทบกับโลกจริง (ใน AR) หรือโลกเสมือน (ใน VR) และส่งคืนข้อมูลเกี่ยวกับการตัดกันใดๆ แนวคิดหลักๆ ได้แก่:

• XRFrame: XRFrame แสดงถึงภาพรวมในชั่วขณะของฉาก XR รวมถึงท่าทางของผู้ดู หรือระนาบหรือคุณสมบัติที่ตรวจพบ การทดสอบการกระทบจะดำเนินการกับ XRFrame
• XRHitTestSource: แสดงถึงแหล่งกำเนิดของรังสีที่จะถูกปล่อยออกมา โดยกำหนดจุดกำเนิด (ที่รังสีเริ่มต้น) และทิศทาง (ที่รังสีชี้ไป) โดยทั่วไปคุณจะสร้าง XRHitTestSource หนึ่งรายการต่อวิธีการป้อนข้อมูล (เช่น คอนโทรลเลอร์ มือ)
• XRHitTestResult: ประกอบด้วยข้อมูลเกี่ยวกับการกระทบที่สำเร็จ รวมถึงท่าทาง (ตำแหน่งและการวางแนว) ของจุดตัดและระยะทางจากจุดกำเนิดของรังสี
• XRHitTestTrackable: แสดงถึงคุณสมบัติที่ถูกติดตาม (เช่น ระนาบ) ในโลกจริง

การนำระบบ Hit Test พื้นฐานมาใช้

เราจะมาดูขั้นตอนการนำระบบ WebXR hit test พื้นฐานมาใช้โดยใช้ JavaScript ตัวอย่างนี้เน้นไปที่การวางวัตถุ AR แต่หลักการสามารถปรับเปลี่ยนได้สำหรับสถานการณ์การโต้ตอบอื่นๆ

ขั้นตอนที่ 1: การขอเซสชัน WebXR และการรองรับ Hit Test

ขั้นแรก คุณต้องขอเซสชัน WebXR และตรวจสอบให้แน่ใจว่าคุณสมบัติ 'hit-test' ถูกเปิดใช้งาน คุณสมบัตินี้จำเป็นสำหรับการใช้ Hit Test Manager

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR session ended');
    });

    // Initialize your WebGL renderer and scene here
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR failed to initialize', e);
  }
}

            

              
                Copy
              
            
          

คำอธิบาย:

• `navigator.xr.requestSession('immersive-ar', ...)`: ขอเซสชัน AR แบบดื่มด่ำ อาร์กิวเมนต์แรกระบุประเภทเซสชัน ('immersive-ar' สำหรับ AR, 'immersive-vr' สำหรับ VR)
• `requiredFeatures: ['hit-test']`: สำคัญมาก ขอคุณสมบัติ 'hit-test' ซึ่งเปิดใช้งาน Hit Test Manager
• `xrSession.requestHitTestSource(...)`: สร้าง XRHitTestSource ซึ่งกำหนดจุดกำเนิดและทิศทางของรังสี ในตัวอย่างพื้นฐานนี้ เราใช้ 'viewer' reference space ซึ่งสอดคล้องกับมุมมองของผู้ใช้

ขั้นตอนที่ 2: การสร้าง Render Loop

Render loop เป็นหัวใจของแอปพลิเคชัน WebXR ของคุณ เป็นที่ที่คุณอัปเดตฉากและเรนเดอร์แต่ละเฟรม ภายใน render loop คุณจะทำการทดสอบการกระทบและอัปเดตตำแหน่งของวัตถุเสมือนของคุณ

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Update the position and orientation of your virtual object
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Make the object visible when a hit is found
    } else {
      object3D.visible = false; // Hide the object if no hit is found
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

คำอธิบาย:

• `xrFrame.getHitTestResults(xrHitTestSource)`: ทำการทดสอบการกระทบโดยใช้ XRHitTestSource ที่สร้างขึ้นก่อนหน้านี้ จะส่งคืนอาร์เรย์ของออบเจกต์ XRHitTestResult ซึ่งแสดงถึงการตัดกันทั้งหมดที่พบ
• `hitTestResults[0]`: เราเอาผลการกระทบแรก ในสถานการณ์ที่ซับซ้อนกว่านี้ คุณอาจต้องการวนซ้ำผลลัพธ์ทั้งหมดและเลือกผลลัพธ์ที่เหมาะสมที่สุด
• `hit.getPose(xrReferenceSpace)`: ดึงท่าทาง (ตำแหน่งและทิศทาง) ของการกระทบใน reference space ที่ระบุ
• `object3D.position.set(...)` และ `object3D.quaternion.set(...)`: อัปเดตตำแหน่งและทิศทางของวัตถุเสมือนของคุณ (object3D) ให้ตรงกับท่าทางที่กระทบ ซึ่งจะวางวัตถุไว้ที่จุดตัดกัน
• `object3D.visible = true/false`: ควบคุมการมองเห็นของวัตถุเสมือน ทำให้ปรากฏขึ้นเมื่อพบการกระทบเท่านั้น

ขั้นตอนที่ 3: การตั้งค่าฉาก 3 มิติของคุณ (ตัวอย่างกับ Three.js)

ตัวอย่างนี้ใช้ Three.js ซึ่งเป็นไลบรารี 3 มิติ JavaScript ยอดนิยมในการสร้างฉากง่ายๆ พร้อมลูกบาศก์ คุณสามารถปรับเปลี่ยนนี้เพื่อใช้ไลบรารีอื่นๆ เช่น Babylon.js หรือ A-Frame

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // Enable WebXR
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10cm cube
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Initially hide the object
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* No animation loop here. WebXR controls it.*/ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Move the camera back
}

// Call initXR() to start the WebXR experience
initXR();

            

              
                Copy
              
            
          

สำคัญ: ตรวจสอบให้แน่ใจว่าได้รวมไลบรารี Three.js ไว้ในไฟล์ HTML ของคุณ:

            


            

              
                Copy
              
            
          

เทคนิคขั้นสูงและการปรับปรุงประสิทธิภาพ

การนำไปใช้ขั้นพื้นฐานข้างต้นเป็นรากฐานสำหรับการทดสอบการกระทบ WebXR นี่คือเทคนิคขั้นสูงและกลยุทธ์การปรับปรุงประสิทธิภาพที่ควรพิจารณาเมื่อคุณสร้างแอปพลิเคชันที่ซับซ้อนขึ้น:

1. การกรองผลลัพธ์ Hit Test

ในบางกรณี คุณอาจต้องการกรองผลลัพธ์การทดสอบการกระทบเพื่อพิจารณาเฉพาะพื้นผิวบางประเภทเท่านั้น ตัวอย่างเช่น คุณอาจต้องการอนุญาตให้วางวัตถุบนพื้นผิวแนวนอนเท่านั้น (พื้นหรือโต๊ะ) คุณสามารถทำได้โดยการตรวจสอบเวกเตอร์ปกติของท่าทางการกระทบและเปรียบเทียบกับเวกเตอร์ขึ้น

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Check if the surface is approximately horizontal
  const upVector = new THREE.Vector3(0, 1, 0); // World up vector
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Rotate the normal to world space

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Adjust the threshold (0.9) as needed
    // Surface is approximately horizontal
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. การใช้ Transient Input Sources

สำหรับวิธีการป้อนข้อมูลขั้นสูง เช่น การติดตามมือ โดยทั่วไปคุณจะใช้แหล่งข้อมูลป้อนเข้าแบบ transient แหล่งข้อมูลป้อนเข้าแบบ Transient แสดงถึงเหตุการณ์การป้อนข้อมูลชั่วคราว เช่น การแตะนิ้วหรือท่าทางมือ WebXR Input API ช่วยให้คุณเข้าถึงเหตุการณ์เหล่านี้และสร้างแหล่งข้อมูลทดสอบการกระทบตามตำแหน่งมือของผู้ใช้

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Create a hit test source from the target ray pose
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Place an object at the hit location
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Cleanup the hit test source
    });
  }
});

            

              
                Copy
              
            
          

3. การปรับปรุงประสิทธิภาพ

ประสบการณ์ WebXR อาจใช้ทรัพยากรคอมพิวเตอร์มาก โดยเฉพาะอย่างยิ่งบนอุปกรณ์มือถือ นี่คือเคล็ดลับบางประการสำหรับการปรับปรุงประสิทธิภาพ:

• ลดความถี่ของการทดสอบการกระทบ: การทำการทดสอบการกระทบทุกเฟรมอาจมีค่าใช้จ่ายสูง พิจารณาลดความถี่ โดยเฉพาะอย่างยิ่งหากการเคลื่อนไหวของผู้ใช้ช้า คุณสามารถใช้ตัวจับเวลาหรือทำการทดสอบการกระทบเมื่อผู้ใช้เริ่มดำเนินการเท่านั้น
• ใช้ Bounding Volume Hierarchy (BVH): หากคุณมีฉากที่ซับซ้อนซึ่งมีวัตถุจำนวนมาก การใช้ BVH สามารถเร่งความเร็วการตรวจจับการชนได้อย่างมาก Three.js และ Babylon.js มีการใช้งาน BVH
• LOD (Level of Detail): ใช้ระดับรายละเอียดที่แตกต่างกันสำหรับโมเดล 3 มิติของคุณ ขึ้นอยู่กับระยะห่างจากกล้อง สิ่งนี้จะลดจำนวนรูปหลายเหลี่ยมที่ต้องเรนเดอร์สำหรับวัตถุที่อยู่ไกล
• Occlusion Culling: อย่าเรนเดอร์วัตถุที่ซ่อนอยู่หลังวัตถุอื่น สิ่งนี้สามารถปรับปรุงประสิทธิภาพได้อย่างมากในฉากที่ซับซ้อน

4. การจัดการกับ Reference Spaces ที่แตกต่างกัน

WebXR รองรับ reference spaces ที่แตกต่างกัน ซึ่งกำหนดระบบพิกัดที่ใช้ในการติดตามตำแหน่งและทิศทางของผู้ใช้ reference spaces ที่พบบ่อยที่สุด ได้แก่:

• Local: จุดกำเนิดของระบบพิกัดจะคงที่สัมพันธ์กับตำแหน่งเริ่มต้นของผู้ใช้ เหมาะสำหรับประสบการณ์ที่ผู้ใช้ยังคงอยู่ในพื้นที่ขนาดเล็ก
• Bounded-floor: จุดกำเนิดอยู่ที่ระดับพื้น และระนาบ XZ แทนพื้น เหมาะสำหรับประสบการณ์ที่ผู้ใช้สามารถเคลื่อนที่ไปรอบๆ ห้องได้
• Unbounded: จุดกำเนิดไม่คงที่ และผู้ใช้สามารถเคลื่อนที่ได้อย่างอิสระ เหมาะสำหรับประสบการณ์ AR ขนาดใหญ่

การเลือก reference space ที่เหมาะสมเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าประสบการณ์ WebXR ของคุณทำงานได้อย่างถูกต้องในสภาพแวดล้อมที่แตกต่างกัน คุณสามารถขอ reference space เฉพาะเมื่อคุณสร้าง XR session

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. การจัดการกับความเข้ากันได้ของอุปกรณ์

WebXR เป็นเทคโนโลยีที่ค่อนข้างใหม่ และไม่ใช่ทุกเบราว์เซอร์และอุปกรณ์จะรองรับเท่ากัน เป็นสิ่งสำคัญที่จะต้องตรวจสอบการรองรับ WebXR ก่อนที่จะพยายามเริ่มต้น XR session

            
if (navigator.xr) {
  // WebXR is supported
  initXR();
} else {
  // WebXR is not supported
  console.error('WebXR is not supported in this browser.');
}

            

              
                Copy
              
            
          

คุณควรทดสอบประสบการณ์ WebXR ของคุณบนอุปกรณ์ที่หลากหลายเพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้อง

ข้อควรพิจารณาด้านการทำให้เป็นสากล

เมื่อพัฒนาแอปพลิเคชัน WebXR สำหรับผู้ชมทั่วโลก สิ่งสำคัญคือต้องพิจารณาเรื่องการทำให้เป็นสากล (i18n) และการแปลตามท้องถิ่น (l10n)

• ข้อความและองค์ประกอบ UI: ใช้ไลบรารีแปลตามท้องถิ่นเพื่อแปลข้อความและองค์ประกอบ UI เป็นภาษาต่างๆ ตรวจสอบให้แน่ใจว่าเลย์เอาต์ UI ของคุณสามารถรองรับความยาวข้อความที่แตกต่างกันได้ ตัวอย่างเช่น คำภาษาเยอรมันมักจะยาวกว่าคำภาษาอังกฤษ
• หน่วยการวัด: ใช้หน่วยการวัดที่เหมาะสมสำหรับภูมิภาคต่างๆ ตัวอย่างเช่น ใช้เมตรและกิโลเมตรในประเทศส่วนใหญ่ แต่ใช้ฟุตและไมล์ในสหรัฐอเมริกาและสหราชอาณาจักร อนุญาตให้ผู้ใช้เลือกหน่วยการวัดที่ต้องการ
• รูปแบบวันที่และเวลา: ใช้รูปแบบวันที่และเวลาที่เหมาะสมสำหรับภูมิภาคต่างๆ ตัวอย่างเช่น ใช้รูปแบบ YYYY-MM-DD ในบางประเทศ และรูปแบบ MM/DD/YYYY ในบางประเทศ
• สกุลเงิน: แสดงสกุลเงินในรูปแบบที่เหมาะสมสำหรับภูมิภาคต่างๆ ใช้ไลบรารีเพื่อจัดการกับการแปลงสกุลเงิน
• ความละเอียดอ่อนทางวัฒนธรรม: ตระหนักถึงความแตกต่างทางวัฒนธรรมและหลีกเลี่ยงการใช้รูปภาพ สัญลักษณ์ หรือภาษาที่อาจเป็นที่รังเกียจสำหรับบางวัฒนธรรม ตัวอย่างเช่น ท่าทางมือบางอย่างอาจมีความหมายแตกต่างกันในวัฒนธรรมที่แตกต่างกัน

เครื่องมือและแหล่งข้อมูลสำหรับการพัฒนา WebXR

มีเครื่องมือและแหล่งข้อมูลหลายอย่างที่สามารถช่วยคุณในการพัฒนา WebXR ได้:

• Three.js: ไลบรารี 3 มิติ JavaScript ยอดนิยมสำหรับการสร้างประสบการณ์บนพื้นฐาน WebGL
• Babylon.js: เอ็นจิ้น 3 มิติ JavaScript ที่ทรงพลังอีกตัวหนึ่งซึ่งมุ่งเน้นไปที่การรองรับ WebXR
• A-Frame: เฟรมเวิร์กเว็บสำหรับการสร้างประสบการณ์ VR โดยใช้ HTML
• WebXR Emulator: ส่วนขยายเบราว์เซอร์ที่ช่วยให้คุณทดสอบประสบการณ์ WebXR ได้โดยไม่ต้องใช้อุปกรณ์ VR หรือ AR จริง
• WebXR Device API Specification: ข้อกำหนด WebXR อย่างเป็นทางการจาก W3C
• Mozilla Mixed Reality Blog: แหล่งข้อมูลที่ดีเยี่ยมสำหรับการเรียนรู้เกี่ยวกับ WebXR และเทคโนโลยีที่เกี่ยวข้อง

สรุป

WebXR Hit Test Manager เป็นเครื่องมือที่ทรงพลังสำหรับการสร้างประสบการณ์ AR/VR ที่โต้ตอบได้และดื่มด่ำ ด้วยการทำความเข้าใจแนวคิดของ ray casting และ Hit Test API คุณสามารถสร้างแอปพลิเคชันที่น่าสนใจซึ่งช่วยให้ผู้ใช้โต้ตอบกับโลกเสมือนจริงได้อย่างเป็นธรรมชาติและชาญฉลาด เมื่อเทคโนโลยี WebXR ยังคงพัฒนาต่อไป ความเป็นไปได้ในการสร้างประสบการณ์ที่ทันสมัยและน่าสนใจนั้นไม่มีที่สิ้นสุด อย่าลืมปรับโค้ดของคุณให้มีประสิทธิภาพและพิจารณาการทำให้เป็นสากลเมื่อพัฒนาสำหรับผู้ชมทั่วโลก โอบรับความท้าทายและรางวัลของการสร้างประสบการณ์เว็บดื่มด่ำยุคต่อไป